//header部分JS功能
window.onload = function() {
        //封装点击跳转网页函数
        function skip(element, url) {
            element.click(function(e) {
                window.location.href = url;
            });
        }
        //封装函数——点击切换类名 参数：点击元素，切换类名的元素，需要切换的类名
        function toggle_class(element, element_i, classname) {
            element.click(function(e) {
                element_i.toggleClass(classname)
            });
        }
        // ****************************页面跳转功能***************************
        //页面跳转——返回按钮的返回功能(加跳转即可)
        skip($('.back'), `http://www.baidu.com`);

        //页面跳转——点击店铺名，跳转至店铺页面
        $('.block').on('click', '.store', function() {
            window.location.href = `http://www.baidu.com`;
            // alert(123)
        })
        $('.line').on('click', '.store', function() {
            window.location.href = `http://www.baidu.com`;
            // alert(123)
        })



        //页面跳转——点击商品图片 跳转至商品详情页
        $('.block').on('click', '.goods', function() {
            window.location.href = `http://www.baidu.com`;
            // alert(123)
        })
        $('.line').on('click', '.goods', function() {
            window.location.href = `http://www.baidu.com`;
            q
            // alert(123)
        })

        //点击信息按钮，跳转至聊天页面
        skip($('.message'), `http://www.baidu.com`);

        //页面跳转——弹出的菜单栏
        skip($('.to_index'), `http://www.baidu.com`); //去往首页
        skip($('.to_shoppingcar'), `http://www.baidu.com`); //去往购物车
        skip($('.to_mylist'), `http://www.baidu.com`); //去往购物清单
        skip($('.to_recommend'), `http://www.baidu.com`); //去往每日推荐

        // ****************************页面跳转功能***************************



        //2.搜索框输入内容，点击搜索内容区陈列信息；——根据内容，从本地数据中提取带有改内容标签的数据，并添加到内容区
        // 取出本地数据中的含有‘橙子’的数据，采集所有数据中的自定义属性，并全部陈列出来
        //数据遍历后，在<section class="line"></section>内添加进下列的标签；
        //数据本地化尝试
        var arr = [ //
            {
                img_src: "./images/橙子-01.png",
                store_name: "千库水果商店1",
                goods_name: '新鲜水嫩夏橙1',
                price_now: 22.00,
                goods_before: 31.50,
                goods_weight: '500g',
                youhui: '限时促销',
                goods_id: 'goods-1',
                store_id: 'store-1'
            },
            //
            {
                img_src: "./images/橙子-02.png",
                store_name: "千库水果商店2",
                goods_name: '新鲜水嫩夏橙2',
                price_now: 19.9,
                goods_before: 25.00,
                goods_weight: '700g',
                youhui: '促销',
                goods_id: 'goods-2',
                store_id: 'store-2'
            },
            //
            {
                img_src: "./images/橙子-03.png",
                store_name: "千库水果商店3",
                goods_name: '新鲜水嫩夏橙3',
                price_now: 20.00,
                goods_before: 34.00,
                goods_weight: '600g',
                youhui: '买一送一',
                goods_id: 'goods-3',
                store_id: 'store-3'
            },
            //
            {
                img_src: "./images/橙子-01.png",
                store_name: "千库水果商店4",
                goods_name: '新鲜水嫩夏橙4',
                price_now: 16.00,
                goods_before: 23.50,
                goods_weight: '500g',
                youhui: '包邮',
                goods_id: 'goods-4',
                store_id: 'store-4'
            },
            //
            {
                img_src: "./images/橙子-03.png",
                store_name: "千库水果商店5",
                goods_name: '新鲜水嫩夏橙5',
                price_now: 22.00,
                goods_before: 31.50,
                goods_weight: '500g',
                youhui: '限时促销',
                goods_id: 'goods-5',
                store_id: 'store-5'
            },
            //
            {
                img_src: "./images/橙子-01.png",
                store_name: "千库水果商店6",
                goods_name: '新鲜水嫩夏橙6',
                price_now: 22.00,
                goods_before: 31.50,
                goods_weight: '500g',
                youhui: '限时促销',
                goods_id: 'goods-6',
                store_id: 'store-6'
            },
            //
            {
                img_src: "./images/橙子-02.png",
                store_name: "千库水果商店7",
                goods_name: '新鲜水嫩夏橙7',
                price_now: 22.00,
                goods_before: 31.50,
                goods_weight: '500g',
                youhui: '限时促销',
                goods_id: 'goods-7',
                store_id: 'store-7'
            },
        ];
        //转化为JSON字符串
        var str = JSON.stringify(arr);
        // 储存
        localStorage.setItem("search", str);
        // 提取
        localStorage.getItem("search");
        var obj = JSON.parse(localStorage.getItem("search"));


        var con_b = '';
        var con_l = '';

        //遍历数组，将各项参数带进  渲染到页面
        $.each(obj, function(i, val) {
            con_b +=
                `<div class="result">
                <div class="top store">
                    <img src="./images/shop_icon.png" alt="">
                    <p>${val.store_name}</p>
                    <span> > </span>
            </div>
            <div class="middle goods">
                <img src=${val.img_src} alt="">
            </div>
            <div class="bottom">
                <h4>${val.goods_name}</h4>
                <p class="mass">
                    <span>${val.goods_weight}</span>
                </p>
                <div class="youhui">
                    <span>${val.youhui}</span>
                </div>
                <div class="price_now">
                    <span>&yen;</span><span>${val.price_now}</span>
                    <p>&yen;<del>${val.goods_before}</del></p>
                    <div class="add_goods">
                    +
                    </div>
                </div>
            </div>
        </div>`;
            con_l +=
                `<div class="res">
            <div class="left goods">
                <img src=${val.img_src} alt="">
            </div>
            <div class="right">
                <div class="line_1">
                    <h4>${val.goods_name}</h4>
                </div>
                <div class="line_2">
                    <p class="mass">
                        <span>${val.goods_weight}</span>
                    </p>
                    <div class="youhui">
                        <span>${val.youhui}</span>
                    </div>
                </div>
                <div class="line_3">
                    <span>&yen;${val.price_now}</span>
                    <p>&yen;<del>${val.goods_before}</del></p>
                </div>
                <div class="line_4">
                    <img src="./images/shop_icon.png" alt="">
                    <p class="store">${val.store_name}</p>
                    <span class="add_goods">+</span>
                </div>
            </div>
        </div>`

            $('.block').html(con_b + `<div class="blank_result"></div>`);
            $('.line').html(con_l);
        });





        //2.2 聊天钮右侧菜单钮，弹出一列选项；
        // 通过切换类名方式， 实现选项栏的出现与消失
        toggle_class($('.setting'), $(".caidan"), 'xianshi')


        //3.点击各类排序标签，使内容按该方式排序；
        $('nav ul:eq(0) li').click(function() {
            // 排他思想  保证选中的标签  文字颜色应有改变
            $(this).addClass('focus').siblings('li').removeClass('focus');
            $(this).children('img').toggleClass('drop');
            $(this).siblings('li').children('img').removeClass('drop');
            if ($(this) == $('.shaixuan')) {
                $('.box').stop().slideToggle();
            } else {
                $('.box').stop().slideUp();
            }
        });

        // 按优惠排序   点击事件，切换类名同时，改变内容区的排序方式
        // 按销量排序   点击事件，切换类名同时，改变内容区的排序方式
        // 按价格排序   点击事件，切换类名同时，改变内容区的排序方式
        // 自定义筛选   点击事件，弹出select,通过change事件，筛选商品；***
        $('.shaixuan').click(function() {
            // 排他思想  保证选中的标签  文字颜色应有改变
            $('.box').stop().slideToggle(500);
        });


        /***4.点击视图按钮，改变页面视图由块排列改为行排列；
        此功能待定***/
        $('.shitu').click(function() {
            $('.block').toggleClass('active');
            $('.line').toggleClass('active');
        });


        /**5.点击店名，进入商家详情页；————————————待定是否跳转
        通过店名，寻找该店家进入其详情页**/
        /* 点击筛选中的某一项，选中筛选条件，仅能选一条 */

        $('.sx li').click(function() {
            $(this).children().addClass('choice_this').parent().siblings().children().removeClass('choice_this');
        });
        $('#confirm').click(function() {
            $('.box').slideToggle(200)
        });

        /**6.点击图片，进入产品详情页；
             根据其id值或自定义属性值，查询到该商品的详情页**/

        /**7.点击加号，购物车0-中增加1项该产品；
         查询到能代表本商品的id 或者自定义属性，触发单击事件，添加到本地数据**/
        $('.add_goods').click(function() {
            alert('已添加至购物车');
        })

    }
    //保证在块显示模式下  奇数数量商品最后一项变形，独占100%宽度；
var blank_result = document.querySelector('.blank_result')
var result = document.querySelectorAll('.result')
if (result.length % 2 == 0) {
    blank_result.style.display = 'none';
} else {
    blank_result.style.display = 'block';
}